<template>
  <div class="app-container">
    <el-form
      ref="elForm"
      :disabled="$route.query.isInfo || isInfo"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="120px"
    >
      <h2 style="text-align: center">供应商管理</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="供应商名称" prop="supplierName">
            <el-input
              v-model="formData.supplierName"
              placeholder="请输入供应商名称"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="供应商类型" prop="supplierType">
            <el-select
              v-model="formData.supplierType"
              placeholder="请选择供应商类型"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="dict in dict.type.sys_supplier_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系人" prop="person">
            <el-input
              v-model="formData.person"
              placeholder="请输入联系人"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系电话" prop="phone">
            <el-input
              v-model="formData.phone"
              placeholder="请输入联系电话"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="邮编" prop="zipCode">
            <el-input
              v-model="formData.zipCode"
              placeholder="请输入邮编"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="传真" prop="fax">
            <el-input
              v-model="formData.fax"
              placeholder="请输入传真"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="手机" prop="mobilePhone">
            <el-input
              v-model="formData.mobilePhone"
              placeholder="请输入手机"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="地址" prop="address">
            <el-input
              v-model="formData.address"
              placeholder="请输入地址"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="formData.remark"
          type="textarea"
          placeholder="请输入备注"
          :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <h4 class="form-header h4">合同</h4>
      <el-form-item label="" prop="contractUrl">
        <FileUpload
          :isDelete="!$route.query.isInfo"
          v-model="formData.contractUrl"
        ></FileUpload>
      </el-form-item>
      <el-col :span="24" v-if="btnShow">
        <el-form-item
          label-width="0"
          style="text-align: center; margin-top: 30px"
        >
          <el-button
            v-if="!($route.query.isInfo || isInfo)"
            type="primary"
            @click="submitForm"
            >提交</el-button
          >
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import {
  supplierAdd,
  updategsupplier,
  supplierInfo,
} from "@/api/supplier/SupplierBase.js";
export default {
  dicts: ["sys_supplier_type"],
  components: {},
  props: {
    isInfo: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
    btnShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      formData: {
        supplierName: undefined,
        person: undefined,
        phone: undefined,
        address: undefined,
        isRecord: "0",
        isGoods: "0",
        isBusLicense: "0",
        // isInstruction: "0",
        // isMass: "0",
        effectStatus: "1",
        oss: undefined,
        busLicenseUrl: undefined,
        qualityUrl: undefined,
        qualificationsUrl: undefined,
        zipCode: undefined,
        fax: undefined,
        mobilePhone: undefined,
        supplierType: undefined,
        response: undefined,
        opinion: undefined,
        contractUrl: undefined,
      },
      rules: {
        contractUrl: [
          {
            required: false,
            message: "请上传合同",
            trigger: "change",
          },
        ],
        supplierType: [
          {
            required: false,
            message: "供应商类型不能为空",
            trigger: "change",
          },
        ],
        mobilePhone: [
          {
            required: false,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        fax: [
          {
            required: false,
            message: "传真不能为空",
            trigger: "blur",
          },
        ],
        zipCode: [
          {
            required: false,
            message: "邮编不能为空",
            trigger: "blur",
          },
        ],

        supplierName: [
          {
            required: true,
            message: "请输入供应商名称",
            trigger: "blur",
          },
        ],
        person: [
          {
            required: false,
            message: "请输入联系人",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: false,
            message: "请输入联系电话",
            trigger: "blur",
          },
        ],
        address: [
          {
            required: false,
            message: "请输入地址",
            trigger: "blur",
          },
        ],
        isRecord: [
          {
            required: true,
            message: "有无备案不能为空",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {},
  created() {
    if (this.$route.query.isEdit || this.$route.query.isInfo || this.isInfo) {
      this.getinfo();
    }
  },
  mounted() {},
  methods: {
    getinfo() {
      return supplierInfo(this.$route.query.id || this.id).then((response) => {
        this.formData = response.data;
      });
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          let query = JSON.parse(JSON.stringify(this.formData));
          if (this.formData.supplierBaseId != undefined) {
            updategsupplier(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            supplierAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    resetForm() {
      this.$tab.closeOpenPage();
    },
  },
};
</script>
